<template>
  <div class="cart">
    <div v-if="ps != ''">
      <table>
        <thead>
          <tr>
            <th>商品</th>
            <th>价格</th>
            <th>数量</th>
            <th>合计</th>
            <th>操作</th>
          </tr>
          <tr></tr>
        </thead>
        <tbody>
          <tr v-for="(p, i) of ps" :key="i">
            <td>
              <router-link to="/">
                <img :src="p.maxpic" alt="" />
                <span>{{ p.pname }}</span>
              </router-link>
            </td>
            <td>￥{{ p.price }}</td>
            <td>
              <div>
                <button
                  @click="
                    count(-1);
                    p.count > 1 ? p.count-- : 1;
                    update(p.count, p.cid);
                  "
                >
                  -
                </button>
                <span>{{ p.count }}</span>
                <button
                  @click="
                    count(+1);
                    p.count++;
                    update(p.count, p.cid);
                  "
                >
                  +
                </button>
              </div>
            </td>
            <td>￥{{ p.price * p.count }}</td>
            <td>
              <i class="el-icon-delete" @click="del(-p.count, p.cid, i)"></i>
            </td>
          </tr>
        </tbody>

        <tfoot>
          <tr></tr>
          <tr>
            <td colspan="5">
              <router-link to="/">
                <h2>继续购物</h2>
              </router-link>
              <div>
                <p>商品总计：￥{{ total }}</p>
                <router-link to="/order">
                  <button>前往收银台</button>
                </router-link>
              </div>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
    <div v-else class="kong">
      <p>您的购物车空空如也~~~</p>
      <router-link to="/"><button>返回商店</button></router-link>
    </div>
  </div>
</template>




<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      ps: [],
      cid: "",
    };
  },
  methods: {
    ...mapMutations(["setCounts"]),
    count(n) {
      var counts = parseInt(this.counts) + parseInt(n);
      sessionStorage.setItem("counts", counts);
      this.setCounts(counts);
      console.log(counts);
    },
    update(count, cid) {
      console.log(count, cid);
      this.axios.get(`/cart/update?count=${count}&cid=${cid}`).then((res) => {
        console.log(res);
      });
    },
    del(count, cid, i) {
      this.ps.splice(i, 1);
      this.update(count, cid);
      var counts = parseInt(this.counts) + parseInt(count);
      sessionStorage.setItem("counts", counts);
      this.setCounts(counts);
    },
  },

  mounted() {
    this.axios.get(`/cart?uid=${this.uid}`).then((res) => {
      console.log(res);
      this.ps = res.data;
      console.log(this.ps);
    });
  },
  computed: {
    ...mapState(["uid", "counts"]),
    total() {
      var result = this.ps.reduce(function (res, p) {
        return res + p.price * p.count;
      }, 0);
      return result;
    },
  },
};
</script>





<style>
.cart {
  min-height: 600px;
}
.cart table {
  font-size: 16px;
  color: #777;
  width: 1190px;
  margin: 100px auto;
}

.cart table thead th {
  /* box-sizing: border-box; */
  padding: 4px 12px;
  color: #444;
  height: 22px;
  text-align: left;
  line-height: 22px;
}
.cart table thead tr:first-child {
  border: 1px solid rgb(221, 221, 221);
}
.cart table thead tr:nth-child(2) {
  padding: 8px;
  height: 22px;
}
.cart table thead th:first-child {
  width: 498px;
}
.cart table thead th:nth-child(2) {
  width: 109px;
}
.cart table thead th:nth-child(3) {
  width: 239px;
}
.cart table thead th:nth-child(4) {
  width: 109px;
  text-align: right;
}
.cart .over {
  overflow-y: auto;
}
.cart table tbody {
  border: 1px solid rgb(221, 221, 221);
}
.cart table tbody tr {
  height: 110.5px;
}
.cart table tbody tr td {
  padding: 8px;
}
.cart table tbody tr td:first-child img {
  width: 90px;
  height: 90px;
}
.cart table tbody tr td:first-child span {
  color: #000;
  margin-left: 40px;
}
.cart table tbody tr td:nth-child(3) button,
.cart table tbody tr td:nth-child(3) span {
  height: 40px;
  line-height: 40px;
  width: 10;
  background-color: #fff;
  border: 0;
}
.cart table tbody tr td:nth-child(3) button:first-child {
  float: left;
  margin-left: 5px;
}
.cart table tbody tr td:nth-child(3) button:nth-of-type(2) {
  float: right;
  margin-right: 5px;
}
.cart table tbody tr td:nth-child(3) div {
  width: 110px;
  border: rgb(221, 221, 221) 1px solid;
  text-align: center;
  height: 42px;
}
.cart table tbody tr td:last-child i {
  font-size: 22px;
  cursor: pointer;
}
.cart table tbody tr td:last-child i:hover {
  color: #333;
}
.cart table tfoot tr:first-child {
  height: 22px;
}
.cart table tfoot tr:nth-child(2) {
  height: 100px;
  padding: 8px;
  border: rgb(221, 221, 221) 1px solid;
}
.cart table tfoot tr:nth-child(2) h2 {
  float: left;
  width: 150px;
  height: 45px;
  background-color: rgb(209, 159, 79);
  font-size: 16px;
  color: white;
  line-height: 45px;
  text-align: center;
  border: 0;
  margin: 47px 10px 0 0;
  cursor: pointer;
}
.cart table tfoot tr:nth-child(2) h2:hover {
  background-color: #bd8448;
}
.cart table tfoot tr:nth-child(2) div {
  float: right;
}
.cart table tfoot tr:nth-child(2) div button {
  width: 150px;
  height: 45px;
  background-color: rgb(209, 159, 79);
  font-size: 16px;
  color: white;
  line-height: 45px;
  border: 0;
  margin: 20px 10px 0 0;
}
.cart table tfoot tr:nth-child(2) div p {
  margin: 10px 10px 0 0;
}
.cart table tfoot tr:nth-child(2) div button:hover {
  background-color: #bd8448;
}
/* 空空如也 */
.cart .kong {
  width: 1200px;
  height: 450px;
  margin: 100px auto;
  text-align: center;
  font-size: 14px;
  color: #777777;
}
.cart .kong button {
  margin-top: 20px;
  width: 105px;
  height: 58px;
  color: #d19f4f;
  border: 1px solid #d19f4f;
  background-color: #fff;
}
.cart .kong button:hover {
  border: 1px solid #bd8448;
  background-color: #bd8448;
  color: white;
}
</style>